<template>
  <div class="index">
      <van-tabs fixed >
        <van-tab :title="channel.name" v-for="channel in channels" :key="channel.id">
            <article-list :channel='channel'></article-list>
        </van-tab>
      </van-tabs>
      <van-popup v-model="show" :style="{ width: '80%' }">
              <more-action></more-action>
      </van-popup>
  </div>
</template>

<script>
import { getChannel } from '@/api/channel'
import ArticleList from './article'
import moreAction from './moreAction'
export default {
  name: 'Home',
  components: {
    ArticleList,
    moreAction
  },
  data () {
    return {
      channels: [],
      show: true
    }
  },
  created () {
    this.loadChannel()
  },
  methods: {
    async loadChannel () {
      try {
        const res = await getChannel()
        this.channels = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang='less' scoped>

</style>
